<template>
    <div class="container">
        <!--查询表单-->
        <div class="search-box" style="margin-left: 20%;margin-right: 15%;float: right;">
            <div>
                <el-form :inline="true" class="demo-form-inline" size="mini">
                    <el-form-item label="订单编号：">
                        <el-input placeholder="订单编号" v-model="searchParams.sellCode"></el-input>
                    </el-form-item>
                    <el-form-item label="订单类型：">
                        <el-select v-model="searchParams.orderType">
                            <el-option
                                    v-for="item in orderTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="支付方式：">
                        <el-select v-model="searchParams.payWay" placeholder="全部">
                            <el-option
                                    v-for="item in payWayOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-form :inline="true" class="demo-form-inline" size="mini">
                    <el-form-item label="业务类型：">
                        <el-select v-model="searchParams.businessType" placeholder="全部">
                            <el-option
                                    v-for="item in businessTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单动作：">
                        <el-select v-model="searchParams.orderAction" placeholder="全部">
                            <el-option
                                    v-for="item in orderActionOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间：">
                        <el-date-picker
                                v-model="pickerOptions.startArrayDate"
                                @change="chooseTime"
                                type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :picker-options="pickerOptions"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="left">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>

            <div style="float: right;">
                <el-form :inline="true" class="demo-form-inline" size="mini">
                    <el-form-item>
                        <el-button type="primary" @click="findPage">搜索</el-button>
                        <el-button type="warning" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>


        </div>

        <!--table展示数据-->
        <div class="table-box" style="margin-left: 20%;margin-right: 15%;float: right;">
            <el-table
                    :data="tableData"
                    style="width: 120%;"
                    stripe
                    @selection-change="checkBoxSelectionChange"
            >
                <!--序号自增-->
                <el-table-column fixed label="序号" width="120%" align="center">
                    <template scope="scope">
                        <span>{{(searchParams.currentPage-1)*searchParams.pageSize+(scope.$index + 1)}} </span>
                    </template>
                </el-table-column>
                <el-table-column
                        type="selection"
                        width="60%">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="sellCode"
                        label="订单编号"
                        width="120%">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="orderType"
                        label="订单类型"
                        width="120%">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="orderAction"
                        label="订单动作"
                        width="120%">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="businessType"
                        label="业务类型"
                        width="120%">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="payWay"
                        label="支付方式"
                        width="120%">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="deliveryWay"
                        label="配送方式"
                        width="180%">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="orderState"
                        label="订单状态"
                        width="120%">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        width="240%">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="mini" @click="orderDetail(scope.row.sellCode)">查看
                        </el-button>
                        <el-button type="primary" plain size="mini" @click="sellReturnOrder(scope.row.sellCode)">生成销售退货单
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页内容-->
        <el-pagination background layout="total,sizes, prev, pager, next, jumper" @size-change="sizeChange"
                       @current-change="currentPageChange"
                       style="margin-left: 20%;margin-right: 15%;float: right"
                       :page-sizes="[5, 10, 15]" :total="total" :page-size="searchParams.pageSize"
                       :current-page="searchParams.currentPage">
        </el-pagination>

    </div>
</template>

<script>
    import sellReturnOrder from './sellReturnOrder'

    export default sellReturnOrder;
</script>

<style src="./sellOrderManage.scss" lang="scss">
</style>